<template>
    <page-header-wrapper>
        <a-card :bordered="false" style="margin-bottom: 20px" title="搜索查询">
            <div class="table-page-search-wrapper">
                <a-form v-bind="queryFormItemLayout">
                    <a-row>
                        <a-col :md="7" :sm="24">
                            <a-form-item label="区域">
                                <a-select v-model="queryParam.address"  @change="deptArea" allowClear placeholder="请选择">
                                    <a-select-option v-for="item in address" :value="item.value" :key="item.value">{{ item.name }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="7" :sm="24">
                            <a-form-item label="部门">
                                <!-- <a-select v-model="queryParam.departId" placeholder="请选择" allowClear>
                                    <a-select-option v-for="item in dept" :value="item.id" :key="item.id">{{ item.depart }}</a-select-option>
                                </a-select> -->
                                <a-input v-model="queryParam.depart" placeholder="请输入部门"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="3">
                            <a-form-item label="">
                                <a-button style="margin-left: 10px" type="primary" @click="onSearch">查询</a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>
        <a-card :bordered="false">
            <div class="table-operator">
                <div>
                    <a-button icon="plus" type="primary" @click="handleAdd">添加</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                childrenColumnName="departs"
                rowKey="id"
                @change="handleChange"
            >
        <span slot="header" slot-scope="text, record">
          <a-avatar v-if="record.img" :size="64" :src="record.img"/>
          <a-avatar v-else :size="64" icon="user"/>
        </span>
                <span slot="status" slot-scope="text, record">
          <a-switch v-model="record.status"
                    @change="(value) => handleChangeSwitch(value,record)"/>
        </span>
                <span slot="action" slot-scope="text, record">
          <template>
            <a-button type="link" @click="handleEdit2(record)">查看详情</a-button>
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                          @confirm="handleDelete(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
            </a-table>
        </a-card>
        <a-modal
            :confirmLoading="modalLoading.loading1"
            :title="modalTitle.title1"
            :visible="modalShow.show1"
            :width="640"
            @cancel="handleCancel"
            @ok="handleConfirm"
        >
            <a-form-model
                v-if="modalShow.show1"
                ref="ruleForm1"
                :model="modalForm.ruleForm1"
                :rules="modalRules.rules1"
                style="margin-bottom:20px"
                v-bind="formItemLayout"
            >
                <a-form-model-item label="部门类型" prop="isOut">
                    <a-radio-group v-model="modalForm.ruleForm1.isOut">
                        <a-radio :value="0">后台系统部门</a-radio>
                        <a-radio :value="1">外协部门</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                
                <a-form-model-item label="区域" prop="address">
                    <a-select v-model="modalForm.ruleForm1.address" allowClear
                              placeholder="请选择">
                        <a-select-option
                            v-for="item in areaList"
                            :key="item.value"
                            :value="item.value"
                        >{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="部门名称" prop="depart">
                    <a-input v-model="modalForm.ruleForm1.depart"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="联系人" prop="contacts">
                    <a-input v-model="modalForm.ruleForm1.contacts"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="联系方式" prop="contactPhone">
                    <a-input v-model="modalForm.ruleForm1.contactPhone"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal
            :bodyStyle="{padding: 0}"
            :confirmLoading="modalLoading.loading2"
            :footer="null"
            :title="modalTitle.title2"
            :visible="modalShow.show2"
            :width="840"
            @cancel="modalShow.show2 = false"
        >
            <a-descriptions :column="1" style="padding:0 20px" title=" ">
                <a-descriptions-item label="部门ID" prop="id">{{
                        modalForm.ruleForm1.id
                    }}
                </a-descriptions-item>
                <a-descriptions-item label="部门名称" prop="depart">
                    {{ modalForm.ruleForm1.depart }}
                </a-descriptions-item>
                <a-descriptions-item label="联系人" prop="contacts">
                    {{ modalForm.ruleForm1.contacts }}
                </a-descriptions-item>
                <a-descriptions-item label="创建时间" prop="createTime">
                    {{ modalForm.ruleForm1.createTime }}
                </a-descriptions-item>
            </a-descriptions>
            <user-list v-if="modalShow.show2" :id="modalForm.ruleForm1.id"></user-list>
        </a-modal>
    
    </page-header-wrapper>
</template>
<script>
import basic from "@/mixins/basic";
import { getAddress, selectAddressDepart } from '@/api/manage'
import {
    getDepartPage,
    updateDepart,
    addDepart,
    delDepart,
    readDepartDetail,
    readDepar,
    getRegionList
} from "@/api/api";
import UploadImage from "@/components/uploadImage";
import UserList from "./user-list.vue";

export default {
    mixins: [basic],
    components: {UploadImage, UserList},
    data() {
        return {
            request: {
                page: getDepartPage,
                update: updateDepart,
                add: addDepart,
                delete: delDepart
            },
            queryParam: {},
            resetQueryParam: {},
            columns: [
                {
                    title: "部门名称",
                    dataIndex: "depart"
                },
                {
                    title: "部门联系人",
                    dataIndex: "contacts"
                },
                {
                    title: "联系方式",
                    dataIndex: "contactPhone"
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime"
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    width: 200,
                    fixed: "right",
                    scopedSlots: {customRender: "action"}
                }
            ],
            tableData: [],
            modalForm: {
                ruleForm1: {
                    id: undefined,
                    depart: "",
                    contacts: "",
                    contactPhone: "",
                    address: "",
                    isOut: 0
                }
            },
            modalResetForm: {
                ruleForm1: {
                    id: undefined,
                    depart: "",
                    contacts: "",
                    address: "",
                    contactPhone: "",
                    isOut: 0
                }
            },
            modalRules: {
                rules1: {
                    depart: [{required: true, message: "输入不能为空"}]
                }
            },
            areaList: [],
            address: [],
            dept: []
        };
    },
    created() {
        getRegionList().then(res => {
            this.areaList = res.map(el => {
                return {
                    value: el.id,
                    name: el.title
                }
            })
        })
        this.getAddress()
        // this.queryParam.depart = '余姚市-值班部门'
    },
    methods: {
        getAddress() {
            getAddress().then(res => {
                this.address = res.map(e => {
                    return {
                        value: e.id,
                        name: e.title
                    }
                })
            })
        },
        deptArea(e) {
            this.$set(this.queryParam, 'departId', undefined)
            this.selectAddressDepart(e)
        },
        selectAddressDepart(address) {
            selectAddressDepart({
                address,
                pageNo: 1,
                pageSize: 100
            }).then(res => {
                this.dept = res.records
            })
        },
        formattData(data) {
        },
        handleChangeSwitch(value, record) {
            this.request
                .update({
                    id: record.id,
                    status: record.status ? 0 : 1
                })
                .then(res => {
                    this.$message.success("修改状态成功");
                })
                .catch(() => {
                    record.status = !record.status;
                });
        },
        handleEdit2(rowItem) {
            readDepar({id: rowItem.id}).then(res => {
                this.modalForm.ruleForm1 = {
                    ...res
                }
                this.modalTitle.title2 = "部门详情";
                this.modalShow.show2 = true;
            })
        },
        handleEdit(rowItem) {
            readDepar({id: rowItem.id}).then(res => {
                this.modalForm.ruleForm1 = {
                    ...this.modalResetForm.ruleForm1
                }
                for (const key in this.modalForm.ruleForm1) {
                    this.modalForm.ruleForm1[key] = res[key];
                }
                this.modalTitle.title1 = "修改";
                this.modalShow.show1 = true;
            })
        },
        handleConfirm() {
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    this.modalLoading.loading1 = true;
                    let form = {
                        ...this.modalForm.ruleForm1,
                        status: this.modalForm.ruleForm1.status ? 0 : 1
                    };
                    this.request[this.modalForm.ruleForm1.id ? "update" : "add"]({
                        ...form
                    })
                        .then(res => {
                            this.$message.success(res.msg);
                            this.modalLoading.loading1 = false;
                            this.onValidate("ruleForm1");
                            this.modalShow.show1 = false;
                            this.onSearch();
                        })
                        .catch(() => {
                            this.modalLoading.loading1 = false;
                        });
                }
            });
        },
        handleCancel2() {
        },
        handleConfirm2() {
        }
    }
};
</script>
